import { inject, observer } from 'mobx-react';
import EHeader from '../../common/EHeader';
import EcontentItem from './EcontentItem';
import { toJS } from 'mobx';
import { Spin } from 'antd';
import { WeaLocaleProvider } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
@inject('wfCenterStore')

@observer
class Main extends React.Component{
  constructor() {
    super() 
    this.state = {
      type: 'res',
    }
  }
  componentDidMount() {
    const {  getResList } = this.props.wfCenterStore;
    getResList();
    window.refreshResponseList = this.doRefresh;
  }
  componentWillReceiveProps(nextProps) {
    const { getResList } = this.props.wfCenterStore;
    if(this.props.location.key !== nextProps.location.key) {
      getResList();
    }
  }
  shouldComponentUpdate(nextProps,nextState) {
      return true;
  }
  componentWillUnmount() {
    clearTimeout(this.timer);
  }
  doSave = (data={}) => {
    const { getSetSave, } = this.props.wfCenterStore;
    getSetSave({eleType: 'res', ...data});
    let that = this;
    this.timer = setTimeout(() => {that.doRefresh()},500);
  }

  doRefresh = () => {
    const { getResList,changeLoadStatus } = this.props.wfCenterStore;
    changeLoadStatus({responseHasLoad: false});
    getResList();
  }

  onSettingBtnClick = () => {
    const { getSettingDialogInfo } = this.props.wfCenterStore;
    getSettingDialogInfo({eleType: 'res'});
  }

  render() {
    const { type } = this.state;
    const { wfCenterStore } = this.props;
    const { settingDataMap, responseData=[], loadingStatusObj: { responseHasLoad }} = wfCenterStore;
    let settingData = []
    if( settingDataMap.has(type) ) {
      settingData = settingDataMap.get(type);
    }
    return(
      <div className='wf-center-ele-item feedback-ele'>
        <EHeader ecId={`${this && this.props && this.props.ecId || ''}_EHeader@2duk7d`} 
          title={getLabel('516841', '新反馈流程')} 
          settingData={settingData} 
          type={type}
          dialogHeight={165}
          toolSetting={{refresh: true, setting: true}}
          doRefresh={this.doRefresh}
          doSave={this.doSave}
          onSettingBtnClick={this.onSettingBtnClick}
        />
        <div className='wf-center-ele-content feedback-content'>
          <div className='feedbackwf-content-item'>
            <div className='spin-warp'>
              <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@0azlez`} spinning={!responseHasLoad}/>
            </div>
            {
              responseHasLoad  && 
              toJS(responseData)[0] && 
              toJS(responseData)[0].datas && 
              toJS(responseData)[0].datas.length > 0 && 
              toJS(responseData).map( v => {
                return v.datas && v.datas.map( (item,index) => {
                    return <EcontentItem ecId={`${this && this.props && this.props.ecId || ''}_EcontentItem@ay5325@${index}`} data={item} doRefresh={this.doRefresh}/>
                })
              })
            }
            {
               responseHasLoad &&  
               toJS(responseData)[0] && 
               toJS(responseData)[0].datas && 
               toJS(responseData)[0].datas.length == 0 &&
                <div className='img-wrap'>
                <img src='/images/ecology9/workflow/center/nodata.png'/>  
              </div>
            
            }
          </div>
        </div>
      </div>
    ) 
  }
}

export default Main